﻿@using TodoListApplication.Models

@model TodoList

@{
    ViewBag.Title = "Todo List";
}

<h2>Todo List</h2>

<div id="parent">
        <div style="float: left; width: 35%;">
            <div>
                @Html.LabelFor(model => model.TaskName)
            </div>
            <div>
                @Html.TextBoxFor(model => model.TaskName, new { @class = "filterItem" })
                @Html.ValidationMessageFor(model => model.TaskName)
            </div>
        </div>

        <div style="float: left; width: 35%;">
            <div>
                @Html.LabelFor(model => model.TargetDate)
            </div>
            <div>
                @Html.TextBoxFor(model => model.TargetDate, new { @class = "filterItem" })
                @Html.ValidationMessageFor(model => model.TargetDate)
            </div>
        </div>

        <div style="float: left; width: 30%;">
            <div>
                @Html.LabelFor(model => model.Severity)
            </div>
            <div>
                @Html.DropDownListFor(model => model.Severity, new List<SelectListItem>
                    {
                         new SelectListItem() {Text = "--Select--", Value = ""},
                        new SelectListItem() {Text = "Low", Value = "L"},
                        new SelectListItem() {Text = "Medium", Value = "M"},
                        new SelectListItem() {Text = "High", Value = "H"}
                    }, new { @class = "filterItem" })
                @Html.ValidationMessageFor(model => model.Severity)
            </div>

            <div>
                <input type="button" id="filterButton" name="search" value="Filter" />
            </div>
        </div>
    </div>
<div>
    <table id="grid"></table>
    <div id="pager"></div>
</div>

<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.4.min.js"></script>
<script src="~/Scripts/i18n/grid.locale-en.js"></script>
<script src="~/Scripts/jquery.jqGrid.min.js"></script>
<script src="~/Scripts/TodoList.js"></script>
    


